<!DOCTYPE html>
<html lang="zh">
<head>
  <th:block th:include="include :: header('基本表单')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12">
      <div class="tabs-container">
        <ul class="nav nav-tabs">
          <li class="active">
            <a data-toggle="tab" href="#tab-bean" aria-expanded="true">表设置</a>
          </li>
          <li class="">
            <a data-toggle="tab" href="#tab-attr" aria-expanded="true">字段信息</a>
          </li>
        </ul>
        <form id="form-gen-edit" class="form-horizontal" th:object="${table}">
          <div class="tab-content">
            <div id="tab-bean" class="tab-pane active">
              <div class="panel-body">
                <div class="col-xs-12 select-table table-striped">
                  <form class="form-horizontal" id="table-form" th:object="${data}">
                    <input type="hidden" th:field="*{id}" placeholder="id"/>
                    <input type="hidden" th:field="*{datasrcId}" placeholder="datasrcId"/>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">表名: </label>
                      <div class="col-sm-8">
                        <input type="text" th:field="*{tableName}" placeholder="表名" class="form-control" disabled>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">bean名称: </label>
                      <div class="col-sm-8">
                        <input type="text" th:field="*{beanName}" placeholder="bean名称" class="form-control"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">表备注: </label>
                      <div class="col-sm-8">
                        <input type="text" th:field="*{tableComment}" placeholder="表备注" class="form-control"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">表单布局: </label>
                      <div class="col-sm-8">
                        <input type="text" th:field="*{formLayout}" placeholder="表单布局" class="form-control"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">基类: </label>
                      <div class="col-sm-8">
                        <select th:field="*{baseclassId}" placeholder="基类" class="form-control"
                                th:with="item=${@BaseClassServiceImpl.getList()}">
                          <option value="">请选择基类</option>
                          <option th:each="baseClass : ${item}" th:text="${baseClass.code}"
                                  th:value="${baseClass.id}"></option>
                        </select>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div id="tab-attr" class="tab-pane">
              <div class="panel-body">
                <div class="col-xs-12 select-table table-striped">
                  <table id="grid-table-attr"></table>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery.tmpl.js}"></script>
<th:block th:include="include :: bootstrap-table-reorder-rows-js"/>
<script th:inline="javascript">
    var prefix = ctx + "gen/table";
    var list =  [[${data.columns}]];
    var tableId =  [[${tableId}]];

    $(function() {
        intGrid();
        $('#grid-table-attr').bootstrapTable('load', list);
    });

    function intGrid() {
		    var options = {
            id: "grid-table-attr",
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            uniqueId: "id",
		        onLoadSuccess: onLoadSuccess,
		        onReorderRow: onReorderRow,
		        columns: [{
                title: "序号",
                width: "5%",
                formatter: function (value, row, index) {
                    // 编号隐藏域
                    var columnIdHtml = $.common.sprintf("<input type='hidden' name='columns[%s].id' value='%s'>", index, row.id);
                    // 排序隐藏域
                    var sortHtml = $.common.sprintf("<input type='hidden' name='columns[%s].sort' value='%s' id='columns_sort_%s'>", index, row.sort, row.columnId);
                    return columnIdHtml + sortHtml + $.table.serialNumber(index);
                },
                cellStyle: function(value, row, index) {
                    return { css: { "cursor": "move" } };
                }
            },
		        {
		            field: 'columnName',
		            title: '字段列名',
		            width: "10%",
		            class: "nodrag",
		            cellStyle: function(value, row, index) {
                    return { css: { "cursor": "default" } };
                }
		        },
		        {
		            field: 'columnComment',
		            title: '字段描述',
		            width: "10%",
		            formatter: function (value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='columns[%s].columnComment' value='%s'>", index, value);
                    return html;
                }
		        },
		        {
		            field: 'columnType',
		            title: '物理类型',
		            width: "10%",
		            class: "nodrag",
		            cellStyle: function(value, row, index) {
                    return { css: { "cursor": "default" } };
                }
		        },
		        {
		            field: 'attrName',
		            title: 'Java属性',
		            width: "10%",
		            formatter: function (value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='columns[%s].attrName' value='%s' required>", index, value);
                    return html;
		        	  }
		        },
		        {
		            field: 'attrLabel',
		            title: 'Java标签',
		            width: "10%",
		            formatter: function (value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='columns[%s].attrLabel' value='%s' required>", index, value);
                    return html;
		        	  }
		        },
		        {
		            field: 'attrType',
		            title: 'Java类型',
		            width: "10%",
		            formatter: function (value, row, index) {
		        		var data = [{ index: index, javaType: value }];
		                return $("#javaTypeTpl").tmpl(data).html();
		        	  }
		        },
		        {
		            field: 'addItem',
		            title: '插入',
		            width: "5%",
		            formatter: function (value, row, index) {
		            	 var isCheck = value == 1 ? 'checked' : '';
		            	 var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].addItem' value='1' %s></label>", index, isCheck);
		        		   return html;
		        	  }
		        },
		        {
		            field: 'editItem',
		            title: '编辑',
		            width: "5%",
		            formatter: function (value, row, index) {
		            	 var isCheck = value == 1 ? 'checked' : '';
		            	 var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].editItem' value='1' %s></label>", index, isCheck);
		        		   return html;
		        	  }
		        },
		        {
		            field: 'gridItem',
		            title: '列表',
		            width: "5%",
		            formatter: function (value, row, index) {
		            	  var isCheck = value == 1 ? 'checked' : '';
		            	  var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].gridItem' value='1' %s></label>", index, isCheck);
		        		    return html;
		        	  }
		        },
		        {
		            field: 'queryItem',
		            title: '查询',
		            width: "5%",
		            formatter: function (value, row, index) {
		                var isCheck = value == 1 ? 'checked' : '';
		            	  var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].queryItem' value='1' %s></label>", index, isCheck);
		        		    return html;
		        	  }
		        },
		        {
		            field: 'queryType',
		            title: '查询方式',
		            width: "10%",
		            formatter: function (value, row, index) {
		            	  var data = [{ index: index, queryType: value }];
		                return $("#queryTypeTpl").tmpl(data).html();
                }
		        },
		        {
		            field: 'reqItem',
		            title: '必填',
		            width: "5%",
		            formatter: function (value, row, index) {
		            	  var isCheck = value == 1 ? 'checked' : '';
		            	  var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].reqItem' value='1' %s></label>", index, isCheck);
		        		    return html;
		        	  }
		        },
		        {
		            field: 'htmlType',
		            title: '显示类型',
		            width: "12%",
		            formatter: function (value, row, index) {
		            	  var data = [{ index: index, htmlType: value }];
		                return $("#htmlTypeTpl").tmpl(data).html();
		        	  }
		        },
		        {
		            field: 'dictType',
		            title: '字典类型',
		            width: "13%",
		            formatter: function (value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='columns[%s].dictType' value='%s'>", index, value);
                    return html;
		        	  }
		        }]
		    };
		    $.table.init(options);
    }

		// 当所有数据被加载时触发处理函数
		function onLoadSuccess(data){
        $.fn.select2.defaults.set( "theme", "bootstrap" );
        $("select.form-control").each(function () {
				    $(this).select2().on("change", function () {
                $(this).valid();
				    })
        })
        $(".check-box").each(function() {
            $(this).iCheck({
                checkboxClass: 'icheckbox-blue'
            })
        })
    }

		// 当拖拽结束后处理函数
		function onReorderRow(data) {
        for (var i = 0; i < data.length; i++) {
            $("#columns_sort_" + data[i].columnId).val(i+1);
        }
    }

    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#form-gen-edit").serializeArray();
            $.ajax({
                cache : true,
                type : "put",
                url : prefix + "/update",
                data : data,
                async : false,
                error : function(req) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    $.operate.successCallback(data);
                }
            });
        }
    }

</script>
</body>
</html>


<!-- java类型 -->
<script id="javaTypeTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='columns[${index}].javaType'>
    <option value="Long" {{if javaType==="Long"}}selected{{/if}}>Long</option>
    <option value="String" {{if javaType==="String"}}selected{{/if}}>String</option>
    <option value="Integer" {{if javaType==="Integer"}}selected{{/if}}>Integer</option>
    <option value="Double" {{if javaType==="Double"}}selected{{/if}}>Double</option>
    <option value="BigDecimal" {{if javaType==="BigDecimal"}}selected{{/if}}>BigDecimal</option>
    <option value="Date" {{if javaType==="Date"}}selected{{/if}}>Date</option>
</select>
</div>

</script>

<!-- 查询方式 -->
<script id="queryTypeTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='columns[${index}].queryType'>
    <option value="EQ" {{if queryType==="EQ"}}selected{{/if}}>=</option>
    <option value="NE" {{if queryType==="NE"}}selected{{/if}}>!=</option>
    <option value="GT" {{if queryType==="GT"}}selected{{/if}}>></option>
    <option value="GTE" {{if queryType==="GTE"}}selected{{/if}}>>=</option>
    <option value="LT" {{if queryType==="LT"}}selected{{/if}}><</option>
    <option value="LTE" {{if queryType==="LTE"}}selected{{/if}}><=</option>
    <option value="LIKE" {{if queryType==="LIKE"}}selected{{/if}}>Like</option>
    <option value="BETWEEN" {{if queryType==="BETWEEN"}}selected{{/if}}>Between</option>
</select>
</div>

</script>

<!-- 显示类型 -->
<script id="htmlTypeTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='columns[${index}].htmlType'>
    <option value="input" {{if htmlType==="input"}}selected{{/if}}>文本框</option>
    <option value="textarea" {{if htmlType==="textarea"}}selected{{/if}}>文本域</option>
    <option value="select" {{if htmlType==="select"}}selected{{/if}}>下拉框</option>
    <option value="radio" {{if htmlType==="radio"}}selected{{/if}}>单选框</option>
    <option value="checkbox" {{if htmlType==="checkbox"}}selected{{/if}}>复选框</option>
    <option value="summernote" {{if htmlType==="summernote"}}selected{{/if}}>富文本</option>
    <option value="datetime" {{if htmlType==="datetime"}}selected{{/if}}>日期控件</option>
    <option value="upload" {{if htmlType==="upload"}}selected{{/if}}>上传控件</option>
</select>
</div>

</script>
